import React from 'react';
import { connect, routerRedux } from 'dva';
import {ArrowUpOutlined, DeleteOutlined, ArrowDownOutlined, PlusOutlined} from '@ant-design/icons';
import { Layout, Button } from 'antd';
import BaseComponent from 'components/BaseComponent';
import * as QueryString from 'query-string'
import createColumns from "./columns";
import {selectColumns, trueColumns} from "./columns";
import Toolbar from "components/Toolbar";
import DataTable from "components/DataTable";
import ModalForm from "components/Modal/ModalForm";

const { Content, Header, Footer } = Layout;
const Pagination = DataTable.Pagination;

@connect(({examsDetail, loading}) => ({
  examsDetail,
  loading: loading.models.examsDetail,
}))
export default class extends BaseComponent {
  state = {
    examId: null,
    record: null,
    visible: false,
    selectionFormVisible: false,
    trueFromVisible: false,
    rows: [],
  };

  componentDidMount() {
    const { location, dispatch } = this.props;
    const params =  QueryString.parse(location.search);
    if(params.id && params.id != ''){
      dispatch({
        type:'examsDetail/loadExamData',
        payload: params,
      });
      this.setState({examId: params.id});
    }else{
      dispatch(routerRedux.replace('/exams'));
    }
  }

  handleDelete = records => {
    const { rows, examId } = this.state;

    this.props.dispatch({
      type: 'examsDetail/remove',
      payload: {
        records,
        examId,
        success: () => {
          // 如果操作成功，在已选择的行中，排除删除的行
          this.setState({
            rows: rows.filter(
              item => !records.some(jtem => jtem.id === item.id)
            )
          });
        }
      }
    });
  };

  onAddSelection = (record) =>{
    this.setState({
      record,
      selectionFormVisible: true,
    })

  };

  onAddTrue = (record)=>{
    this.setState({
      record,
      trueFromVisible: true,
    })

  };

  render() {
    const { examsDetail, loading, dispatch} = this.props;
    const { pageData, publishStatus } = examsDetail;
    const columns = createColumns(this, publishStatus);
    const selectCols = selectColumns(this);
    const trueCols = trueColumns(this);
    const { rows, record, selectionFormVisible, trueFromVisible, examId } = this.state;

    const dataTableProps = {
      loading,
      columns,
      rowKey: 'id',
      dataItems: pageData,
      selectType: 'checkbox',
      showNum: true,
      isScroll: true,
      selectedRowKeys: rows.map(item => item.id),
      onSelect: (keys, rows) => this.setState({ rows })
    };

    if (record && record.optionInfos && record.optionInfos.length > 0){
      record.optionInfos.forEach(item => {
        record['option_' + item.optionOrder.toLowerCase()] = item.name;
      })
    }

    const selectionFormProps ={
      loading,
      record,
      columns: selectCols,
      visible: selectionFormVisible,
      onCancel: ()=>{
        this.setState({
          record: null,
          selectionFormVisible: false,
        })
      },
      onSubmit: (values)=>{
        let type;
        if(!values.id) type = 'examsDetail/addSelection'; else type = 'examsDetail/editSelection';
        values.examPaperInfoId = examId;
        dispatch({
          type,
          payload:{
            values,
            examId,
            success: ()=>{
              this.setState({
                record: null,
                selectionFormVisible: false,
              })
            }
          }
        });
      }
    };

    const trueFormProps ={
      loading,
      columns: trueCols,
      visible: trueFromVisible,
      record,
      onCancel: ()=>{
        this.setState({
          record: null,
          trueFromVisible: false,
        })
      },
      onSubmit:(values)=>{
        let type;
        if(!values.id) type = 'examsDetail/addTrue'; else type = 'examsDetail/editTrue';
        values.examPaperInfoId = examId;
        dispatch({
          type,
          payload:{
            values,
            examId,
            success: ()=>{
              this.setState({
                record: null,
                trueFromVisible: false,
              })
            }
          }

        })
      }
    };

    return (
      <Layout className="full-layout">
        <Header>
          <Toolbar
            appendLeft={
              <Button.Group>
                {/*<Button type="primary" icon={<PlusOutlined />} onClick={this.onAdd}>*/}
                {/*  新增*/}
                {/*</Button>*/}
                <Button disabled={publishStatus} type="default" icon={<PlusOutlined/>} onClick={this.onAddSelection}>
                  新增选择题
                </Button>
                <Button disabled={publishStatus} type="default" icon={<PlusOutlined/>} onClick={this.onAddTrue}>
                  新增判断题
                </Button>
                <Button
                  disabled={publishStatus || !rows.length}
                  onClick={e => this.onDelete(rows)}
                  icon={<DeleteOutlined />}
                >
                  删除
                </Button>
              </Button.Group>
            }
            // pullDown={<SearchBar type="grid" {...searchBarProps} />}
          >
            {/*<SearchBar group="abc" {...searchBarProps} />*/}
          </Toolbar>
        </Header>
        <Content>
          <DataTable {...dataTableProps} />
        </Content>
        {/*<Footer>*/}
        {/*  <Pagination {...dataTableProps} />*/}
        {/*</Footer>*/}
        <ModalForm {...selectionFormProps}/>
        <ModalForm {...trueFormProps}/>
      </Layout>
    );
  }
}
